<template>
  <div class="area-search">
    <vue-draggable-resizable
      :w="100"
      :h="100"
      @dragging="onDrag"
      @resizing="onResize"
      :parent="true"
    >
      <div class="city-chose" ref="cityChose">
        <div class="cityChose-panel">
          <div class="cityChose-panel-top">
            当前站：{{ curCity }}
            <em
              class="fd-fr el-icon-close panel-close"
              @click="$emit('pointcancel')"
            ></em>
          </div>
          <div class="hotCity-div clearfix">
            <div
              class="fd-fl hotCity-item"
              v-for="item in hotCity"
              :key="item.name_en"
              @click="$emit('pointClick', item)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </vue-draggable-resizable>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hotCity: [
        {
          adcode: "100000",
          name: "全线",
          label: "全线",
          x: "113.33041",
          y: "33.747319",
          index: "0",
        },
        {
          adcode: "110000",
          name: "中心",
          x: "113.298139572143555",
          y: "33.751997649859071",
          label: "中心",
          index: "1",
        },
        {
          adcode: "120000",
          name: "韩庄站",
          x: "112.854180335998535",
          y: "33.915977499822333",
          label: "韩庄站",
          index: "2",
        },
        {
          adcode: "120001",
          name: "高庄站",
          x: "112.862339615821838",
          y: "33.901058552988729",
          label: "高庄站",
          index: "3",
        },
        {
          adcode: "120002",
          name: "马道站",
          x: "112.857828140258789",
          y: "33.899032651617915",
          label: "马道站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "大庄站",
          x: "112.879661321640015",
          y: "33.879283157915651",
          label: "大庄站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "大庄矿作业区",
          x: "112.884478569030762",
          y: "33.871431074495575",
          label: "大庄矿作业区",
          index: "4",
        },
        {
          adcode: "120002",
          name: "军沟营站",
          x: "112.898683547973633",
          y: "33.865747550441277",
          label: "军沟营站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "中鸿站",
          x: "112.890121936798096",
          y: "33.864535966606013",
          label: "中鸿站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "没梁庙站",
          x: "112.922930717468262",
          y: "33.84600371873811",
          label: "没梁庙站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "大地水泥厂",
          x: "112.967562675476074",
          y: "33.844506707832714",
          label: "大地水泥厂",
          index: "4",
        },
        {
          adcode: "120002",
          name: "彭庄站",
          x: "113.005177974700928",
          y: "33.855822747075194",
          label: "彭庄站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "宝丰站",
          x: "113.041409254074097",
          y: "33.857658120804928",
          label: "宝丰站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "苗圃站",
          x: "113.13721776008606",
          y: "33.807607796211776",
          label: "苗圃站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "九矿站",
          x: "113.194842338562012",
          y: "33.788688704257588",
          label: "九矿站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "十一矿站",
          x: "113.173062801361084",
          y: "33.815220614347993",
          label: "十一矿站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "五矿站",
          x: "113.224689960479736",
          y: "33.782678654911948",
          label: "五矿站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "七矿站",
          x: "113.260288238525391",
          y: "33.755565772945452",
          label: "七矿站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "一矿站",
          x: "113.308889865875244",
          y: "33.760560895786725",
          label: "一矿站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "二矿站",
          x: "113.29375147819519",
          y: "33.758339886032395",
          label: "二矿站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "四矿站",
          x: "113.262519836425781",
          y: "33.777577807385534",
          label: "四矿站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "三矿站",
          x: "113.252477645874023",
          y: "33.774759726392787",
          label: "三矿站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "六矿站",
          x: "113.236920833587646",
          y: "33.789937029551744",
          label: "六矿站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "申西站",
          x: "113.329129815101609",
          y: "33.747688943327283",
          label: "申西站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "十矿站",
          x: "113.337235450744629",
          y: "33.742541405560402",
          label: "十矿站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "十二矿站",
          x: "113.336902856826782",
          y: "33.737331104744896",
          label: "十二矿站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "田庄站",
          x: "113.356075286865234",
          y: "33.744361367563577",
          label: "田庄站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "天宏站",
          x: "113.364593982696533",
          y: "33.74150650798299",
          label: "天宏站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "八矿站",
          x: "113.426477909088135",
          y: "33.754584553899853",
          label: "八矿站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "范庄站",
          x: "113.450188636779785",
          y: "33.804041840480309",
          label: "范庄站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "首山一矿站",
          x: "113.419246673583984",
          y: "33.817520372293721",
          label: "首山一矿站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "十三矿站",
          x: "113.381137847900376",
          y: "33.882102249266019",
          label: "十三矿站",
          index: "4",
        },
        {
          adcode: "120002",
          name: "电厂站",
          x: "112.985887527465806",
          y: "33.840514550523842",
          label: "电厂站",
          index: "4",
        },
      ],
      curCity: "全线",
      panelShow: false,
      flags: false,
      touchStartFlag: false,
      width: 0,
      height: 0,
      x: 0,
      y: 0,
    };
  },
  created() {
    this.getAllData();
  },
  mounted() {
    this.$nextTick(() => {
      document.addEventListener("click", this.docClick);
    });
  },
  beforeDestroy() {
    document.removeEventListener("click", this.docClick);
  },
  methods: {
    getAllData() {},

    /**
     * document 点击事件
     * @param {*} e
     */
    docClick(e) {
      if (!this.$refs.cityChose.contains(e.target)) {
        this.panelShow = false;
      }
    },
    /**
     * 城市点击
     * @param {*} item
     */
    cityClick(item) {},
    onResize: function (x, y, width, height) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
    },
    onDrag: function (x, y) {
      this.x = x;
      this.y = y;
    },
  },
};
</script>
<style scoped lang="scss">
$border-corlor: rgba(121, 121, 121, 1);
$hoverColor: #33ccff;
.area-search {
  position: absolute;
  left: 20%;
  top: 12%;
  z-index: 1000;
}
.city-chose {
  position: relative;
  .cityChose-panel {
    position: absolute;
    right: 0;
    width: 410px;
    //height: 500px;
    border: 1px solid $border-corlor;
    margin-top: 10px;
    background-color: rgba(0, 0, 0, 0.537254901960784);
    display: flex;
    flex-direction: column;
  }
}
.hotCity-item {
  color: $hoverColor;
  margin: 2px 6px;
  font-size: 13px;
  font-weight: 200;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
.panel-toggle-item {
  color: rgba(204, 204, 204, 0.847058823529412);
  font-weight: bold;
  font-size: 15px;
  margin: 4px 6px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  &.active-item {
    color: $hoverColor;
    border-color: $hoverColor;
  }
}
.panel-tackle {
  /deep/.el-input__inner {
    height: 24px;
  }
  /deep/.el-input {
    .el-input__prefix {
      top: -8px;
    }
  }
}
.anchor {
  background-color: rgba(204, 204, 204, 1);
  color: #666;
  margin: 2px 6px;
  width: 18px;
  text-align: center;
  cursor: pointer;
  &:hover {
    background-color: $hoverColor;
    color: #fff;
  }
  &.activeAnchor {
    background-color: $hoverColor;
    color: #fff;
  }
}
.city-list {
  flex: 1;
  overflow: auto;
  color: rgba(255, 255, 255, 0.847058823529412);
}
.city-circle {
  display: flex;
  padding: 6px;
  .city-bold {
    font-weight: 700;
  }
  .city-content {
    flex: 1;
  }
  .cityName {
    margin: 0 4px;
    cursor: pointer;
    line-height: 22px;
    &:hover {
      color: $hoverColor;
    }
  }
}
.cityChose-panel-top {
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #cccccc;
  margin: 6px 6px 8px 6px;
  border-bottom: 1px solid $border-corlor;
  padding-bottom: 8px;
}
.panel-close {
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
}
.ipt-fate-suffix {
  position: relative;
  top: 5px;
}
.cur-ipt {
  /deep/ input {
    background: transparent;
    color: #fff;
    border-color: $border-corlor;
    cursor: pointer;
  }
}
.fd-fl {
  float: left;
}
.fd-fr {
  float: right;
}
.clearfix::after {
  content: " ";
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}
</style>